<!DOCTYPE html>
<html>
	<head>
		<title>登录</title>
		<meta charset="utf-8" />
		<script src="js/jquery-2.2.3.min.js"></script>
		<script src="js/ip.js"></script>
		<style type="text/css" media="screen">
			body {
				margin: 0px;
				background-image: url('./images/back.jpg');
				width: 100%;
				height: 100%;
				text-align: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-attachment: fixed;
			}

			#container {
				height: 100%;
				width: 100%;
				margin-top: 0px;
			}

			#header {
				color: white;
				border-width: 0px;
				width: 100%;
				height: 66px;
				font-size: 28px;
				text-align: center;
				margin-top: 100px;
			}

			#panel {
				margin-top: 70px;
			}

			#backimg {
				border-width: 0px;
				left: 0px;
				top: 0px;
				width: 100%;
				height: 100%;
			}

			#panel_img {
				border-width: 0px;
				width: 456px;
				height: 431px;
			}

			#panel_back {
				position: absolute;
				z-index: 0;
				border-width: 0px;
				width: 100%;
			}

			#panel_content {
				position: absolute;
				z-index: 1;
				border-width: 0px;
				margin-top: 70px;
				width: 100%;
			}

			#username {
				border-width: 0px;
				width: 250px;
				height: 40px;
			}

			#username_input {
				width: 250px;
				height: 40px;
				font-family: 'Arial Normal', 'Arial';
				font-weight: 400;
				font-style: normal;
				font-size: 13px;
				text-decoration: none;
				color: #000000;
				text-align: left;
				border: 1px solid black;
				border-radius: 5px;
			}

			#password {
				border-width: 0px;
				width: 250px;
				height: 40px;
				margin-top: 50px;
			}

			#password_input {
				left: 0px;
				top: 0px;
				width: 250px;
				height: 40px;
				font-family: 'Arial Normal', 'Arial';
				font-weight: 400;
				font-style: normal;
				font-size: 13px;
				text-decoration: none;
				color: #000000;
				text-align: left;
				border: 1px solid black;
				border-radius: 5px;
			}

			#login {
				border-width: 0px;
				margin-top: 50px;
				width: 80px;
				height: 30px;
				font-size: 14px;
			}

			#login_button {
				border-radius: 5px;
				background-color: #FFFFFF;
				border-width: 1px;
				width: 81px;
				height: 31px;
			}

			#to_register {
				border-width: 0px;
				width: 220px;
				height: 40px;
				font-size: 16px;
				margin-top: 40px;
			}
		</style>
		<script type="text/javascript">
			function check_submit() {
				var username = document.getElementById("username_input").value;
				var password = document.getElementById("password_input").value;
				if (username == "") {
					alert("请输入用户名");
					return;
				}
				if (password == "") {
					alert("请输入密码");
					return;
				}

				console.log("ok");
				var data = {};
				data["username"] = username;
				data["password"] = password;
				$.ajax({
					"url": defaultIp + "/login",
					"type": "post",
					"dataType": "json",
					"data": data,
					"success": function(result) {
						console.log(result);
						//show
						if (result["suc"] == true) {
							sessionStorage.setItem("isLogin", "true");
							sessionStorage.setItem("username", username);
							window.location.href = "index.html";
						} else {
							alert(result["msg"]);
						}
					},
					"error": function(result) {
						//console.log("查询失败!");
						alert("登录失败!");
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="container">

			<div id="header" class="header" align="center">
				<p><span>社会职位变化分析系统</span></p>
				<p><span>用户登录</span></p>
			</div>
			<div id="panel" align="center">
				<div id="panel_back" align="center">
					<img id="panel_img" src="images/panel.png"/ style="opacity: 0.4">
				</div>

				<div id="panel_content" align="center">
					<div id="username">
						<input id="username_input" name="username" type="text" placeholder="请输入邮箱" />
					</div>

					<div id="password">
						<input id="password_input" name="password" type="password" placeholder="请输入密码" />
					</div>
					<!--
  	        <div id="login" align="center">
              <input type="button" onclick="login()" value="登录" id="login_button"/>
  	        </div>
          -->

					<div id="login" align="center">
						<button type="button" id="login_button" onclick="check_submit()">登录</button>
						<!--
               <input type="submit" value="注册" id="register_button"/>
             -->
					</div>

					<div id="to_register" class="ax_default label">
						<a href="register.html">
							<p><span>没有账号？去注册</span></p>
						</a>
					</div>


				</div>
			</div>
		</div>
	</body>
</html>
